<script setup>
import { defineModel } from 'vue'
import { debounce } from 'lodash' // 引入防抖函数
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import 'vditor/dist/index.css'
import Vditor from 'vditor'
import config from '@/config/config'
import { useDark } from '@vueuse/core'
import request from '@/utils/request'

const isDark = useDark()
const content = defineModel()
const vditorRef = ref(null)
const vditor = ref(null)
const isInitEditor = ref(false)
const isFirstUpdate = ref(true)

// 监听 content 改变
watch(
  () => content.value,
  (newValue) => {
    if (isFirstUpdate.value && isInitEditor.value) {
      isInitEditor.value && vditor.value.setValue(newValue)
      isFirstUpdate.value = false
    }
  },
)

onMounted(() => {
  vditor.value = new Vditor(vditorRef.value, {
    toolbar: [
      'emoji',
      'headings',
      'bold',
      'italic',
      'strike',
      '|',
      'line',
      'quote',
      'list',
      'ordered-list',
      'check',
      'outdent',
      'indent',
      'code',
      'inline-code',
      'upload',
      'link',
      'table',
      '|',
      'edit-mode',
      'both',
      'preview',
      'fullscreen',
      'outline',
      'code-theme',
      'export',
      '|',
      'undo',
      'redo',
    ],
    value: content.value,
    height: '100%',
    theme: isDark.value ? 'dark' : 'classic',
    preview: {
      theme: { current: isDark.value ? 'Dark' : 'Ant Design' },
      markdown: {
        linkBase: config.file_base_url,
      },
      hljs: {
        style: isDark.value ? 'github-dark' : 'github',
        enable: true,
        lineNumber: false,
      },
    },
    mode: 'ir', // 即时渲染模式
    typewriterMode: true, // 启用打字机模式
    counter: { enable: true, type: 'text' }, // 启用计数器功能
    cache: { enable: false }, // 禁用缓存功能
    // 启用大纲并设置为默认显示
    outline: {
      enable: true, // 启用大纲功能
      position: 'left', // 大纲位置：left 或 right
    },
    // 添加内容变化监听
    input: debounce(async (value) => {
      content.value = value
    }, 2000),
    upload: {
      // 限制文件选择数量（单选）
      multiple: false,
      // 允许的文件格式（MIME 类型）
      accept: 'image/png,image/jpeg,image/jpg, image/gif',
      handler: async (file) => {
        // 创建 FormData 存放文件
        const formData = new FormData()
        formData.append('file', file[0])

        // 调用自己封装的 request 实例上传
        const response = await request.post('/upload/image', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        if (response.data.code !== 200) return
        const { file_name, file_path } = response.data.data
        // 插入图片到编辑器
        vditor.value.insertValue(`![${file_name}](${file_path})`)
      },
    },
    // Vditor初始化完成后的回调
    after: () => {
      if (content.value) {
        vditor.value.setValue(content.value)
        isFirstUpdate.value = false
      } else {
        vditor.value?.focus()
      }
      isInitEditor.value = true
    },
  })
})

onBeforeUnmount(() => {
  if (vditor.value) {
    vditor.value.destroy()
    vditor.value = null
  }
})
</script>

<template>
  <div class="vditor-page">
    <div ref="vditorRef" class="vditor"></div>
  </div>
</template>

<style scoped lang="scss">
.vditor-page {
  height: 100%;
  :deep(.vditor) {
    height: 100%;
    border: none;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }
    /*定义滑块 内阴影*/
    ::-webkit-scrollbar-thumb {
      background: var(--el-border-color);
      border-radius: 4px;
    }
    .vditor-toolbar {
      border-top: 1px solid var(--border-color);
    }
  }
}
</style>
